<template>
  <div class="cancellation-approval-page">
    <h2>取消申请审批</h2>

    <div v-if="loading" class="loading-spinner">加载中...</div>
    <div v-if="error" class="error-message">{{ error }}</div>
    <div v-if="successMessage" class="success-message">{{ successMessage }}</div>

    <section class="pending-cancellations-section">
      <h3>待审核的取消申请</h3>
      <p v-if="pendingCancellations.length === 0 && !loading">
        目前没有待审核的取消申请。
      </p>
      <div v-else class="request-list">
        <div v-for="request in pendingCancellations" :key="request.order_id" class="request-item">
          <div class="request-details">
            <p><strong>订单ID:</strong> {{ request.order_id }}</p>
            <p><strong>客户:</strong> {{ request.real_name }} ({{ request.user_name }})</p>
            <p><strong>会议室:</strong> {{ request.room_name }}</p>
            <p><strong>预订时间:</strong> {{ request.start_time }} - {{ request.end_time }}</p>
            <p><strong>总金额:</strong> ¥{{ request.total_fee }}</p>
            <p><strong>预估退款:</strong> ¥{{ request.refund_fee.toFixed(2) }}</p>
            <p><strong>申请时间:</strong> {{ request.request_time }}</p>
          </div>
          <div class="request-actions">
            <button @click="handleApproveCancellation(request.order_id)" class="approve-button">
              批准
            </button>
            <button @click="handleRejectCancellation(request.order_id)" class="reject-button">
              拒绝
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useAuthStore } from '../../stores/auth.js'; // Assuming employee login uses authStore
import { fetchPendingCancellations, approveCancellation, rejectCancellation } from '../../mocks/clientApi.js'; // Using clientApi for mocks for now

const authStore = useAuthStore();
const pendingCancellations = ref([]);
const loading = ref(false);
const error = ref(null);
const successMessage = ref(null);

const fetchPendingData = async () => {
  loading.value = true;
  error.value = null;
  successMessage.value = null;
  try {
    // In a real app, you might filter by employee ID or check employee type
    const response = await fetchPendingCancellations();
    if (response.success) {
      pendingCancellations.value = response.data;
    } else {
      error.value = response.message || '获取待审核申请失败。';
    }
  } catch (err) {
    console.error('Error fetching pending cancellations:', err);
    error.value = '加载数据时发生错误。';
  } finally {
    loading.value = false;
  }
};

const handleApproveCancellation = async (orderId) => {
  if (!confirm('您确定要批准此取消申请并进行退款吗？')) {
    return;
  }

  loading.value = true;
  error.value = null;
  successMessage.value = null;
  try {
    const result = await approveCancellation(orderId);
    if (result.success) {
      successMessage.value = result.message;
      // Remove the approved request from the list
      pendingCancellations.value = pendingCancellations.value.filter(
        (request) => request.order_id !== orderId
      );
    } else {
      error.value = result.message || '批准取消申请失败。';
    }
  } catch (err) {
    console.error('Error approving cancellation:', err);
    error.value = '批准取消申请时发生错误。';
  } finally {
    loading.value = false;
  }
};

const handleRejectCancellation = async (orderId) => {
  if (!confirm('您确定要拒绝此取消申请吗？')) {
    return;
  }

  loading.value = true;
  error.value = null;
  successMessage.value = null;
  try {
    const result = await rejectCancellation(orderId);
    if (result.success) {
      successMessage.value = result.message;
      // Remove the rejected request from the list
      pendingCancellations.value = pendingCancellations.value.filter(
        (request) => request.order_id !== orderId
      );
    } else {
      error.value = result.message || '拒绝取消申请失败。';
    }
  } catch (err) {
    console.error('Error rejecting cancellation:', err);
    error.value = '拒绝取消申请时发生错误。';
  } finally {
    loading.value = false;
  }
};

onMounted(fetchPendingData);
</script>

<style scoped>
.cancellation-approval-page {
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

h2, h3 {
  color: #333;
  margin-bottom: 1rem;
}

.loading-spinner, .error-message, .success-message {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  text-align: center;
}

.loading-spinner {
  background-color: #e0f7fa;
  color: #00796b;
}

.error-message {
  background-color: #ffebee;
  color: #c62828;
}

.success-message {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.pending-cancellations-section {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.request-list {
  display: grid;
  gap: 1rem;
}

.request-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.request-details p {
  margin: 0.3rem 0;
  color: #444;
}

.request-details strong {
  color: #222;
}

.request-actions button {
  margin-left: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.approve-button {
  background-color: #4CAF50; /* Green */
  color: white;
}

.approve-button:hover {
  background-color: #45a049;
}

.reject-button {
  background-color: #f44336; /* Red */
  color: white;
}

.reject-button:hover {
  background-color: #d32f2f;
}

.request-actions button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>
